<template>
  <div class="container">
    <!-- 弹框测试 -->
    <Button type="primary" @click="show = true">弹框测试</Button>
    <Dialog v-model:show="show" title="标题" :show-cancel-button="false">
      <div style="padding: 20px">返回键可关闭弹框</div>
    </Dialog>
    <!-- 修改app显示样式 -->
    <Button type="primary" @click="showStyle = true">修改样式</Button>
    <Dialog
      v-model:show="showStyle"
      title="标题"
      :show-cancel-button="false"
      @confirm="changeStyle"
    >
      <div style="padding: 20px">
        屏幕高度<input type="text" v-model="height">
        顶部距离<input type="text" v-model="top">
      </div>
    </Dialog>
    <!-- 获取地理位置信息 -->
    <Button type="primary" @click="getLocation">获取地理位置信息</Button>
    <Dialog
      v-model:show="showLocation"
      title="标题"
      :show-cancel-button="false"
    >
      <div style="padding: 20px">{{ location }}</div>
    </Dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Button from "vant/lib/button";
import Dialog from "vant/lib/dialog";
import "vant/lib/button/style";
import "vant/lib/dialog/style";
import { nano } from "web-view-nano";
//注册弹框(这里很重要,目的是解决启动时间的问题)
const show = ref(false);
const showStyle = ref(false)
const showLocation = ref(false);
setTimeout(() => {
    nano.addDialog(show);
    nano.addDialog(showStyle);
    nano.addDialog(showLocation);
}, 1000);
//修改样式(更多参数请参考web-view-nano文档)
const height = ref('100vh')
const top = ref('0')
function changeStyle(){
    nano.addStyle({
        height:height.value,
        top:top.value
    })
}
//注册地理位置信息
const location = ref({});
function getLocation() {
  showLocation.value = true;
  nano.getLocation((status, info) => {
    if (status) {
      location.value = info;
    }
    if (!status) {
      location.value = info;
    }
  });
}
</script>

<style scoped>
.container {
  padding: 40px;
  padding-top: 44px;
  height: calc(100vh - 44px - 40px * 2);
  width: calc(100vw - 40px * 2);
  display: flex;
  justify-content: space-between;
  align-items: space-between;
  flex-wrap: wrap;
}
</style>
